<template>
  <div>
    <button @click="onClick">按钮</button>
    <!-- 动态组件 -->
    <component :is="componentName"></component>
  </div>
</template>

<script>
import AComponent from './AComponent'
import BComponent from './BComponent'

export default {
  components: {
    AComponent,
    BComponent
  },
  data: () => ({
    componentName: 'a-component'
  }),
  methods: {
    onClick() {
      if (this.componentName === 'a-component') {
        this.componentName = 'b-component'
      } else {
        this.componentName = 'a-component'
      }
    }
  }
}
</script>
